<template>
  <main class="sp-layout">
    <!-- 菜单头 -->
    <Menu />
    <section class="sp-layout__mainer">
      <SlideBar />
      <section class="sp-layout__content">
        <Tags />
        <section class="sp-layout__wrapper">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <router-view v-if="isRouterAlive"></router-view>
            </keep-alive>
          </transition>
        </section>
      </section>
    </section>
    <!-- <SlideBar />
    <div>
      <Tags />
      <div class="box">
        <transition name="move" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view v-if="isRouterAlive"></router-view>
          </keep-alive>
        </transition>
      </div>
    </div> -->
  </main>
</template>

<script>
  // @ is an alias to /src
  import Menu from "@/components/Menu.vue"
  import SlideBar from "@/components/SlideBar.vue"
  import Tags from "@/components/Tags.vue"
  import bus from "@/common/bus.js"

  export default {
    name: "Home",
    components: {
      Menu,
      SlideBar,
      Tags,
    },
    provide() {
      return {
        reload: this.reload,
      };
    },
    data() {
      return {
        tagsList: [],
        collapse: false,
        isRouterAlive: true,
      };
    },
    methods: {
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      }
    },
    created() {
      bus.$on("collapse", (msg) => {
        this.collapse = msg;
      });
      // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
      bus.$on("tags", (msg) => {
        let arr = [];
        for (let i = 0, len = msg.length; i < len; i++) {
          msg[i].name && arr.push(msg[i].name);
        }
        arr.push('createarray')
        this.tagsList = arr;
      })
    },
    mounted() {}
  };
</script>
<style scoped>
.sp-layout__content{
  /* width:calc(100%-100px); */
  width:93%
}
</style>